<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021-01-25
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <base href="<%=request.getContextPath()%>">
    <link rel="stylesheet" href="/webjars/layui/2.5.6/css/layui.css"/>
</head>
<body>
<form class="layui-form" lay-filter="search">
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px">姓名</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input  type="text" id="userName" name="userName"  class="layui-input" lay-filter="caigouId">
            </div>
        </div>
        <div class="layui-inline">
            <select name="roleId" lay-filter="roleId" lay-verify="" >
                <option value="0">请选择角色</option>
            </select>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm" onclick="add()" >添加</button>
        </div>
<%--        <div class="layui-inline">--%>
<%--            <button type="button" class="layui-btn layui-btn-sm" onclick="grant()" >授权</button>--%>
<%--        </div>--%>
    </div>
</form>
<script type="text/html" id="toolbar">

</script>
<table lay-filter="user" id="user"></table>
<script type="text/html" id="action">
    {{#  if(d.userId== 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    {{#  } }}
    {{#  if(d.userId!= 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}
</script>
<script src="/webjars/layui/2.5.6/layui.js"></script>
<script>
    //填充下拉框数据
    layui.use('jquery', function () {
        let $ = layui.$;
        $.ajax({
            url: "/user/searchRole",
            method: 'post',
            async: false,
            success: function ({data}) {
                console.log("执行ajax方法，并返回数据")
                console.log(data)
                let $searchSelect = $('select[name=roleId]');
                // let $userBoxSelect =$('select[name=roleId]');
                for (let shop of data) {
                    $searchSelect.append(`<option value='` + shop.roleId + `'> ` + shop.roleName + `</option>`)
                    // $userBoxSelect.append(`<option value='` + shop.roleId + `'> ` + shop.roleId + `</option>`)
                }
                sessionStorage.setItem("shopCacheMap", JSON.stringify(data));
            }
        })
    })
    //将表中的角色id改成角色名称
    // layui.use('jquery', function () {
    //     let $ = layui.$;
    //     $.ajax({
    //         url: "/user/showroleName",
    //         method: 'post',
    //         async: false,
    //         data:{
    //             roleId:roleId
    //         },
    //         success: function ({data}) {
    //             console.log("执行ajax方法，并返回数据")
    //             console.log(data)
    //
    //         }
    //     })
    // })

    layui.use(["table","jquery","laypage","form"],function () {
        let table=layui.table;
        let $=layui.$;
        // let laypage = layui.laypage;
        let sea=layui.form.val("search");
        let form=layui.form;
        laypage = layui.laypage
        table.render({
            id:"user",
            elem:"#user",
            where:sea,
            url:"/user/search",
            height:"400px",
            toolbar: "#toolbar",
            page:true,
            limit:5,
            limits:[5,10,15,20],
            cols:[[
                {title:"ID",field:"userId"},
                {title:"登录名",field:"loginName"},
                {title: "姓名",field: "userName"},
                {title: "角色",field: "roleId"},
                {title: "电子邮件",field: "email"},
                {title: "电话",field: "phoneNo"},
                // {title: "登录标志",field: "loginFlag"},
                {title: "操作",toolbar:"#action"}
            ]],
            done:function (res,curr,count) {

                //登录标志的转换
                // $("[data-field='loginFlag']").children().each(function(){
                //     if($(this).text()=='Y'){
                //         $(this).text("允许登录")
                //     }else if($(this).text()=='N'){
                //         $(this).text("禁止登录")
                //     }
                // });

            }

        })


        //采购订单号文本框监听事件
        $("#userName").on("input",function (e) {
            let sea=form.val("search");
            layui.table.reload('user',{
                where: sea
            });
        });

        //供应商文本框监听事件
        // $("#supplyCode").on("input",function (e) {
        //     let sea=form.val("search");
        //     layui.table.reload('purchaseNote',{
        //         where: sea
        //     });
        // });

        //下拉框监听事件
        form.on('select(roleId)',function (data) {
            let sea=form.val("search");
            console.log(sea)
            layui.table.reload('user',{
                where:sea
            });
        });


        table.on("tool(user)",function ({data,event}) {

            switch (event) {
                case "update":
                    update(data);
                    break;
                case "del":
                    del(data);
                    break;
            }
        })
    })

    function add() {
        layui.use(["layer","jquery","table"],function () {
            console.log("点击添加");
            let layer=layui.layer;
            let $=layui.$;
            let table=layui.table;
            let jquery=layui.jquery;
            layer.open({
                type: 1,
                title:"添加用户",
                content: $('#add'), //注意，如果str是object，那么需要字符拼接。
                closeBtn:1,
                area: ['500px', '400px'],
                btn:["确认","取消"],
                yes(){
                    let tbUscUser = layui.form.val("add");
                    if (tbUscUser.loginName==null||tbUscUser.loginName==''||tbUscUser.password==null||tbUscUser.password==''||tbUscUser.userName==null||tbUscUser.userName==''){
                        alert("不能为空，添加失败")
                        $("#add").click();
                        return false;
                    }else {

                        $.post("/user/add", tbUscUser)
                            .done(({msg}) => {
                                table.reload("user");
                                layer.close(layer.index);
                                layer.msg(msg);
                            });
                    }


                    // $("#add").click();
                }

            })
            // 物资编码函数
            $("#loginName").on("input",function (e) {
                var cgcodeinput=document.getElementById("loginName");
                var loginName=cgcodeinput.value;

                $.post("/user/showByloginName",{'loginName':loginName},function (str) {
                    console.log(str.data)
                    if (str.data==null){
                        $("#p").hide();
                    }else {
                        $("#p").show();
                    }

                })

            });
        })
    }
    //删除
    function del(data){
        layui.use("jquery",function(){
            let layer=layui.layer;
            let userId=data.userId;
            layer.confirm('确认删除吗？',{
                btn:['确定','取消']
            },function(){
                layui.$.post("/user/del",{'userId':userId})
                    .done(({msg})=>{
                        layui.table.reload("user");
                        layer.msg(msg);
                    });
            })

        });
    }

    //修改
    function update(data) {
        layui.use(["layer","jquery","table"],function () {
            console.log("点击修改")
            let layer=layui.layer;
            let $=layui.$;
            let table=layui.table;
            let userId=data.userId;
            console.log(userId)
            $.post("/user/showByUserId",{'userId':userId} , function(str){
                console.log(str)
                layui.form.val("update",str.data);
            });
            layer.open({
                type: 1,
                title:"详细信息",
                content: $('#update'), //注意，如果str是object，那么需要字符拼接。
                closeBtn:1,
                anim: 5,
                area: ['500px', '400px'],
                btn:['确定','取消'],
                yes(){
                    let tbUscUser = layui.form.val("update");
                    console.log(tbUscUser)
                    $.post("/user/update",tbUscUser)
                        .done(({msg}) => {
                            table.reload("user");
                            layer.close(layer.index);
                            layer.msg(msg);
                        });
                }
            })
        })
    }

</script>
</body>
<div style="display: none" id="add">
    <form class="layui-form" lay-filter="add">
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" id="loginName" lay-verify="required" class="layui-input">
            </div>
        </div>
<%--        <div id="p" style="display:none;" class="layui-form-mid layui-word-aux">该用户名已被注册</div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" lay-verify="required"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" id="Name"   lay-verify="required"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电子邮件</label>
            <div class="layui-input-block">
                <input type="email" name="email" id="email"   lay-verify="required"   class="layui-input">
            </div>
        </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="phoneNo"  lay-verify="required"   class="layui-input">
                    </div>
                </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="roleId" lay-verify="roleId">

                </select>
            </div>
        </div>


    </form>
</div>
<div style="display: none" id="update">
    <form class="layui-form" lay-filter="update">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="userId"    lay-verify="required"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="userName"    lay-verify="required"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电子邮件</label>
            <div class="layui-input-block">
                <input type="email" name="email"    lay-verify="required"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
                <input type="text" name="phoneNo"  lay-verify="required"   class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="roleId" lay-verify="roleId">

                </select>
            </div>
        </div>
    </form>
</div>
</html>
